<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Login Page</title>
<script th:src="@{/js/jquery.min.js}" type="text/javascript"></script>  
<script th:src="@{/js/bootstrap.min.js}" type="text/javascript"></script> 
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
<style type="text/css">
	body {
		padding-top: 50px;
	}
	.starter-template {
		padding: 40px 15px;
		text-align: center;
	}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container">
		<div class="navbar-header">
			<a class="navbar-brand" href="#">Spring Security Example</a>
		</div>
		<div id="navbar" class="collapse navbar-collapse">
			<ul class="nav navbar-nav">
				<li><a th:ref="@{/}">Home</a></li>
			</ul>
		</div>
	</div>
</nav>	
<div class="container">
	<p th:if="${param.logout}" class="bg-warning">Log out status</p>
	<p th:if="${param.error}" class="bg-danger">Error: Please try again!</p>
	<h2>Please login by Account/Password</h2>
	<form name="form" th:action="@{/login}" action="/login" method="POST">
		<div class="form-group">
			<label for="username">Account</label>
			<input type="text" class="form-control" name="username" value="" placeholder="please input account..." />
		</div>
		<div class="form-group">
			<label for="password">Password</label>
			<input type="password" class="form-control" name="password" value="" placeholder="please input password..." />
		</div>
		<input type="submit" class="btn btn-primary" id="login" value="Login" />	
	</form>
</div>
</body>
</html>